import { Button } from "@/ui/button";
import { Card, CardHeader, CardTitle } from "@/ui/card";
import ChartArea from "./view/chart-area";
import ChartBar from "./view/chart-bar";
import ChartColumnMultiple from "./view/chart-column-multiple";
import ChartColumnNegative from "./view/chart-column-negative";
import ChartColumnStacked from "./view/chart-column-Stacked";
import ChartColumnSingle from "./view/chart-column-single";
import ChartDonut from "./view/chart-donut";
import ChartLine from "./view/chart-line";
import ChartMixed from "./view/chart-mixed";
import ChartPie from "./view/chart-pie";
import ChartRadar from "./view/chart-radar";
import ChartRadial from "./view/chart-radial";

// 数据如诗韵流淌，图表展千姿百态
export default function ChartPage() {
	return (
		<>
			<Button variant="link" asChild>
				<a href="https://apexcharts.com" target="_blank" rel="noreferrer">
					https://apexcharts.com
				</a>
			</Button>

			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
				{/* 区域如山峦叠翠，数据层层相依 */}
				<Card title="区域图">
					<CardHeader>
						<CardTitle>区域图</CardTitle>
					</CardHeader>
					<ChartArea />
				</Card>
				{/* 折线如江河蜿蜒，趋势一目了然 */}
				<Card title="折线图">
					<CardHeader>
						<CardTitle>折线图</CardTitle>
					</CardHeader>
					<ChartLine />
				</Card>
				{/* 独柱擎天立，单列展雄姿 */}
				<Card title="单列柱状图">
					<CardHeader>
						<CardTitle>单列柱状图</CardTitle>
					</CardHeader>
					<ChartColumnSingle />
				</Card>
				{/* 群柱竞相立，多列展繁华 */}
				<Card title="多列柱状图">
					<CardHeader>
						<CardTitle>多列柱状图</CardTitle>
					</CardHeader>
					<ChartColumnMultiple />
				</Card>
				{/* 层层叠叠如宝塔，数据累积见真章 */}
				<Card title="堆积柱状图">
					<CardHeader>
						<CardTitle>堆积柱状图</CardTitle>
					</CardHeader>
					<ChartColumnStacked />
				</Card>
				{/* 正负如阴阳对照，得失皆在图中 */}
				<Card title="正负柱状图">
					<CardHeader>
						<CardTitle>正负柱状图</CardTitle>
					</CardHeader>
					<ChartColumnNegative />
				</Card>
				{/* 横条如竹简排列，数据横向展开 */}
				<Card title="条形图">
					<CardHeader>
						<CardTitle>条形图</CardTitle>
					</CardHeader>
					<ChartBar />
				</Card>
				{/* 混合如诗词并茂，多样展示数据美 */}
				<Card title="混合图表">
					<CardHeader>
						<CardTitle>混合图表</CardTitle>
					</CardHeader>
					<ChartMixed />
				</Card>
				{/* 圆如满月分天下，占比一览无余 */}
				<Card title="饼图">
					<CardHeader>
						<CardTitle>饼图</CardTitle>
					</CardHeader>
					<ChartPie />
				</Card>
				{/* 环如玉璧有缺口，甜圈展示更清晰 */}
				<Card title="环形图">
					<CardHeader>
						<CardTitle>环形图</CardTitle>
					</CardHeader>
					<ChartDonut />
				</Card>
				{/* 径向如花瓣绽放，进度环环相扣 */}
				<Card title="径向条形图">
					<CardHeader>
						<CardTitle>径向条形图</CardTitle>
					</CardHeader>
					<ChartRadial />
				</Card>
				{/* 雷达如蛛网八方，多维数据尽收眼底 */}
				<Card title="雷达图">
					<CardHeader>
						<CardTitle>雷达图</CardTitle>
					</CardHeader>
					<ChartRadar />
				</Card>
			</div>
		</>
	);
}
